<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>temp</title>
	<style>
		header {
			min-width: 960px;
		}
		.header {
			width: 90%;
			height: 300px;
			background: #eee;
			margin: 0 auto;
			position: relative;
		}
		.head {
			position: absolute;
			left: 10px;
			bottom: 20px;
		}
		.bigFont {
			font-size: 32px;
		}
		.inputText {
			width: 200px;
			height: 32px;
			font-size: 25px;
		}
		.inputTextButton {
			width: 100px;
			height: 38px;
			font-size: 25px;
		}
		.imgBox {
			box-sizing:border-box;
			width: 25%;
			border: 1px solid #eee;
			float: left;
			text-align: center;
			padding-top: 5%;
			padding-bottom: 5%;

		}
		.imgBoxOut {
			width: 90%;
			overflow: hidden;
			margin: 0 auto;
		}
		section {
			min-width: 960px;
		}
	</style>
</head>
<body>
	<header>
		<div class="header">
			<div class="head">
				<span class="bigFont">Search GitHub Users</span><br>
				<input class="inputText" type="text">
				<button class="inputTextButton">search</button>
			</div>
		</div>
	</header>
	<section>
		<div class="imgBoxOut">
			<div class="imgBox"><img src="../../src/assets/haha.gif"></div>
			<div class="imgBox"><img src="../../src/assets/haha.gif"></div>
			<div class="imgBox"><img src="../../src/assets/haha.gif"></div>
			<div class="imgBox"><img src="../../src/assets/haha.gif"></div>
			<div class="imgBox"><img src="../../src/assets/haha.gif"></div>
			<div class="imgBox"><img src="../../src/assets/haha.gif"></div>
			<div class="imgBox"><img src="../../src/assets/haha.gif"></div>
			<div class="imgBox"><img src="../../src/assets/haha.gif"></div>
			<div class="imgBox"><img src="../../src/assets/haha.gif"></div>
			<div class="imgBox"><img src="../../src/assets/haha.gif"></div>
		</div>
	</section>
</body>
</html>